<template>
    <div>
    <sg-navbar></sg-navbar>
    <div style="margin: 20px">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <el-form-item label="评论类型" prop="status">
            <el-select
            v-model="queryParams.type"
            placeholder="评论类型"
            clearable
            style="width: 240px"
            >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
            </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
            <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            ></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        </el-form>

        <el-table v-loading="loading" ref="commentTable" :data="dataList" stripe border>
        <el-table-column label="ID" align="center" prop="id" width="80" />
        <el-table-column label="评论类型" align="center" prop="type" width="100">
            <template slot-scope="scope">
                <el-tag :type="scope.row.type==='0'?'':'info'">{{scope.row.type==='0'?'文章':'友链'}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="是否根评论" align="center" width="100">
            <template slot-scope="scope">
                <el-tag :type="scope.row.rootId===-1?'success':'danger'">{{scope.row.rootId===-1?'是':'否'}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="评论内容" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
            <router-link :to="scope.row.type==='0'?'/DetailArticle?aid=' + scope.row.articleId:'/Friendslink'" class="link-type">
                <span class="comment-table" style="color: #409EFF;">{{ scope.row.content }}</span>
            </router-link>
            </template>
        </el-table-column>
        <el-table-column label="过滤后的评论" align="center">
            <template slot-scope="scope">
                <p style="color: #409EFF;" class="comment-table" 
                @click="filterContentDetail(scope.row.filterContent,scope.row.avatarUrl,scope.row.createNick)">
                {{formatter(scope.row.filterContent)}}</p>
            </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="commentStatus" width="100">
            <template slot-scope="scope">
            <el-tag :type="scope.row.commentStatus==='0'?'danger':'success'">{{scope.row.commentStatus==='0'?'隐藏':'展示'}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
            <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
            >删除</el-button>
            </template>
        </el-table-column>
        </el-table>

        <el-dialog
        title="评论详情"
        :visible.sync="dialogVisible"
        width="30%"
        center>
        <img class="avatar-img" :src="avatarUrl?avatarUrl:$store.state.errorImg">
        <p style="font-size:1.5em;font-weight:bolder;margin-bottom:5px">{{createNick}}</p>
        <p style="margin-left: 60px;" class="comment-table" v-html="analyzeEmoji(filterContent)" />
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </div>
        </el-dialog>

        <pagination
        :total="total"
        :pageSizes="[4, 7, 10, 20, 30, 50]"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        />
    </div>
    <my-footer></my-footer>
    </div>
</template>
<script>
import header from '../../components/header.vue'
import {allCommentList,deleteComment} from '../../api/comment'

export default {
    data() {
        return {
            loading: false,
            filterContent: '',
            avatarUrl: '',
            createNick: '',
            dialogVisible: false,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                type: undefined,
                articleId: undefined,
                startTime: undefined,
                endTime: undefined
            },      
            // 日期范围
            dateRange: [],
            dataList: [
                {
                    "id": 1,
                    "type": "0",
                    "articleId": 22,
                    "rootId": 50,
                    "content": "...",
                    "filterContent": "...",
                    "createNick": "...",
                    "avatarUrl": null,
                    "label": "0",
                    "commentStatus": "1",
                    "createTime": "...... ..."
                },{
                    "id": 1,
                    "type": "0",
                    "articleId": 22,
                    "rootId": 50,
                    "content": "...",
                    "filterContent": "...",
                    "createNick": "...",
                    "avatarUrl": null,
                    "label": "0",
                    "commentStatus": "1",
                    "createTime": "...... ..."
                },{
                    "id": 1,
                    "type": "0",
                    "articleId": 22,
                    "rootId": 50,
                    "content": "...",
                    "filterContent": "...",
                    "createNick": "...",
                    "avatarUrl": null,
                    "label": "0",
                    "commentStatus": "1",
                    "createTime": "...... ..."
                },{
                    "id": 1,
                    "type": "0",
                    "articleId": 22,
                    "rootId": 50,
                    "content": "...",
                    "filterContent": "...",
                    "createNick": "...",
                    "avatarUrl": null,
                    "label": "0",
                    "commentStatus": "1",
                    "createTime": "...... ..."
                },{
                    "id": 1,
                    "type": "0",
                    "articleId": 22,
                    "rootId": 50,
                    "content": "...",
                    "filterContent": "...",
                    "createNick": "...",
                    "avatarUrl": null,
                    "label": "0",
                    "commentStatus": "1",
                    "createTime": "...... ..."
                },{
                    "id": 1,
                    "type": "0",
                    "articleId": 22,
                    "rootId": 50,
                    "content": "...",
                    "filterContent": "...",
                    "createNick": "...",
                    "avatarUrl": null,
                    "label": "0",
                    "commentStatus": "1",
                    "createTime": "...... ..."
                },{
                    "id": 1,
                    "type": "0",
                    "articleId": 22,
                    "rootId": 50,
                    "content": "...",
                    "filterContent": "...",
                    "createNick": "...",
                    "avatarUrl": null,
                    "label": "0",
                    "commentStatus": "1",
                    "createTime": "...... ..."
                },{
                    "id": 1,
                    "type": "0",
                    "articleId": 22,
                    "rootId": 50,
                    "content": "...",
                    "filterContent": "...",
                    "createNick": "...",
                    "avatarUrl": null,
                    "label": "0",
                    "commentStatus": "1",
                    "createTime": "...... ..."
                },{
                    "id": 1,
                    "type": "0",
                    "articleId": 22,
                    "rootId": 50,
                    "content": "...",
                    "filterContent": "...",
                    "createNick": "...",
                    "avatarUrl": null,
                    "label": "0",
                    "commentStatus": "1",
                    "createTime": "...... ..."
                },{
                    "id": 1,
                    "type": "0",
                    "articleId": 22,
                    "rootId": 50,
                    "content": "...",
                    "filterContent": "...",
                    "createNick": "...",
                    "avatarUrl": null,
                    "label": "0",
                    "commentStatus": "1",
                    "createTime": "...... ..."
                }
            ],
            OwOlist: this.$store.state.OwOlist,
            options: [{
                value: '0',
                label: '文章评论'
            }, {
                value: '1',
                label: '友链评论'
            },]
        }
    },
    created(){
        this.getList();
    },
    methods: {
        getList(){
            this.loading = true;
            if(this.dateRange){
                this.queryParams.startTime = this.dateRange[0];
                this.queryParams.endTime = this.dateRange[1];
            }else {
                this.queryParams.startTime = undefined;
                this.queryParams.endTime = undefined;
            }
            allCommentList(this.queryParams).then(res => {
                this.loading = false;
                this.total = res.total;
                this.dataList = res.rows;
                this.$nextTick(() => {
                    this.$refs.commentTable.doLayout();
                })
            })
        },
        preText(pretext) {
            return pretext.replace(/\r\n/g, '<br/>')
                        .replace(/\n/g, '<br/>')
                        .replace(/\s/g, '&nbsp;');
        },
        formatter(cont){
            var str = cont;
            str = this.preText(str);
            if (str.length > 25) {   // 超过contentLength长度的内容隐藏
                return str.slice(0, 25) + '...';
            }
            return str;
        },
        analyzeEmoji(cont){//编译表情替换成图片展示出来
            var pattern1 = /\[[a-z0-9\u4e00-\u9fa5]+\]/g;
            var pattern2 = /\[[a-z0-9\u4e00-\u9fa5]+\]/;
            var urlRegex= /(https|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|](&nbsp;|<br\/>){1}/g;
            var content = cont.match(pattern1);
            var str = cont;
            str = this.preText(str);
            if(content){
                for(var i=0;i<content.length;i++){
                    for(var j=0;j<this.OwOlist.length;j++){
                        if("["+this.OwOlist[j].title +"]" == content[i]){
                            var src = this.OwOlist[j].url;
                            break;
                        }
                    }
                    str = str.replace(pattern2,'<img src="static/img/emot/image/'+src+'"/>');
                }
            }
            var url = str.match(urlRegex)
            if(url) {
                for(let i=0; i<url.length; i++) {
                    let endUrl = url[i].replace(/(&nbsp;|<br\/>){1}/, "")
                    str = str.replace(endUrl,'<img style="margin: 0" src=""><a target="_blank" href=' + endUrl + '>' + endUrl + '</a>' + '&nbsp;');
                }
            }
            return str;
        },
        filterContentDetail(filterContent,avatarUrl,createNick){
            this.filterContent = filterContent;
            this.avatarUrl=avatarUrl;
            this.createNick=createNick;
            this.dialogVisible = true;
        },
        handleDelete(row){
            this.$confirm('确定要删除评论吗？且该评论下的回复也一并会被删除', '系统提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteComment(row.id).then((res) => {
                    this.$message({
                        type:'success',
                        message:'删除成功'
                    })
                    this.getList();
                })
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                type: undefined,
                articleId: undefined,
                startTime: undefined,
                endTime: undefined
            };
            this.handleQuery();
        },
    },
    components: {
        'sg-navbar':header,
    }
}
</script>
<style>
.comment-table{
    letter-spacing: 1px;
    cursor: pointer;
}
.comment-table img{
    vertical-align: middle;
    margin: 0 3px 0 3px;
    width: 18px;
    height: 18px;
}
.comment-table a{
    letter-spacing: 0;
    color: #47a8cf;
}
.avatar-img{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    float: left;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    margin-right: 15px;
    object-fit: cover;
    cursor: pointer;
}
</style>